<template>
    <div class="personal-container">
        <el-card class="box-card">
            <div slot="header">
                <!-- 导航 -->
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>个人设置</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- 导航 -->
            </div>
            <!-- 个人设置 -->
            <el-row>
                <el-col :span="16">
                    <el-form ref="form" class="searcher-form" :model="form" label-width="100px">
                        <el-form-item label="uid：">
                            {{form.uid}}
                        </el-form-item>
                        <el-form-item label="账号：" >
                            {{form.username}}
<!--                            <el-input v-model="form.username" readonly></el-input>-->
                        </el-form-item>
                        <el-form-item label="昵称：" >
                            <el-input v-model="form.nickname"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码：" >
                            <el-input v-model="form.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="个性签名：" >
                            <el-input v-model="form.sign"></el-input>
                        </el-form-item>
                        <el-form-item label="电子邮箱：" >
                            <el-input v-model="form.email"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="form.id" type="hidden"></el-input>
                            <el-button type="primary" icon="el-icon-setting" @click="onSave">保存</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="4" :offset="2">
                    <el-avatar style="cursor: pointer" shape="square" :size="120" fit="cover" :src="form.url" @click.native="$refs.file.click()"></el-avatar>
                    <p style="cursor: pointer" @click="$refs.file.click()">点击更换头像</p>
                    <input type="file" ref="file" @change="onFileChange" hidden/>
                </el-col>
            </el-row>
            <!-- 个人设置 -->
        </el-card>

        <el-dialog
            title="更换头像"
            :visible.sync="dialogVisible"
            :append-to-body="true"
            @opened="onDialogOpened"
            @closed="onDialogClosed">
            <div class="preView-image-wrap">
                <img class="preImage" ref="preImg" :src="preImageUrl"/>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateUserHeaderImg">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import 'cropperjs/dist/cropper.css'
    import Cropper from 'cropperjs'
    import {adminUpload} from "../../api/upload"
    import globalBus from '../../utils/global-bus'
    import {getUserInfo} from "../../api/user";

    export default {
        name: "PersonalIndex",
        data() {
            return {
                form: {
                    url: require('./img/boy.jpeg'),
                    id: '',
                    uid: '',
                    username: '',
                    nickname: '',
                    phone: '15970191157',
                    sign: 'lose your face!!!',
                    email: 'ww6933@sina.com'
                },
                dialogVisible: false,   // 预览图片弹出框
                preImageUrl: '',        // 预览图片
                cropper: ''             // 图片裁剪器
            }
        },
        created() {
            this.form.username = window.localStorage.getItem(window.localStorage.getItem("ww-token"))
            this.loadUserInfo()
        },
        methods: {
            loadUserInfo() {
                getUserInfo().then(res => {
                    const data = res.data.data
                    this.form.nickname = data.nickname
                    this.form.uid = data.uid
                    this.form.id = data.id

                })
            },
            onSave() {

            },
            onFileChange() {        // 文件变动事件
                this.dialogVisible = true
                const file = this.$refs.file
                const url = window.URL.createObjectURL(file.files[0])
                this.preImageUrl = url
            },
            onDialogOpened() {      // dialog打开事件
                if(this.cropper){
                    // 解决预览图片，更换图片裁剪不更新图片url情况
                    this.cropper.replace(this.preImageUrl)
                    return
                }
                // 当dialog完全打开，图片可见状态时初始化cropper
                const image = this.$refs.preImg
                this.cropper = new Cropper(image, {
                    aspectRatio: 1,         // cropper比例
                    viewMode: 1,            // cropper不要超出画布大小
                    dragMode: "none",       // 不能拖动画布
                    background: false,      // 不显示超出画布的背景
                    cropBoxResizable: false // 不允许改变cropper大小
                })
            },
            onDialogClosed() {          // dialog关闭事件
                // dialog关闭后，销毁cropper，解决预览图片切换不更新
                // this.cropper.destroy()
            },
            updateUserHeaderImg() {     // 更新图片事件
                // 获取croppedImg
                this.cropper.getCroppedCanvas().toBlob((file) => {
                    const formData = new FormData()
                    // Pass the image file name as the third parameter if necessary.
                    formData.append('file', file)
                    formData.append('type', 'headImg')
                    // 调用上传croppedImg接口
                    adminUpload(formData).then(res => {
                        if(res.data.code == 200){
                            this.$message({
                                message: '上传成功',
                                type: 'success'
                            })
                        }else{
                            this.$message.error('上传失败')
                            return
                        }
                    })
                    // UI界面直接显示上传文件图像
                    this.form.url = window.URL.createObjectURL(file)
                    // 关闭dialog
                    this.dialogVisible = false
                    // TODO 更新头像显示
                    globalBus.$emit('updateHeadImg',this.form.url)

                })
            }
        }
    }
</script>

<style scoped>
    /* Ensure the size of the image fit the container perfectly */
    .preImage {
        display: block;
        /* This rule is very important, please don't ignore this */
        max-width: 100%;
        height: 220px;
    }
</style>
